<template>
  <div id="report-commit">
    <sui-segment stacked="tall">
      <sui-form>
        <sui-form-field>
          <h4 style="margin-bottom:15px;font-weight:300">标题</h4>
          <sui-input placeholder="Title..." v-validate="'required:true'" name="title" v-model="panel.title" focus/>
          <span>{{ errors.first('title') }}</span>
        </sui-form-field>
        <sui-divider />
        <sui-grid :columns="2" divided>
          <sui-grid-row>
            <sui-grid-column :width="12">
              <h4 style="margin-bottom:15px;font-weight:300">内容</h4>
              <MarkdownEditor ref="markdownEditor" v-on:commit="commit"></MarkdownEditor>
            </sui-grid-column>
            <sui-grid-column :width="4">
              <sui-list>
                <sui-list-item>
                  <sui-form-field>
                    <h4 style="margin-bottom:15px;font-weight:300">类型</h4>
                    <sui-dropdown placeholder="类型" selection :options="panel.type.options" v-model="panel.type.current" />
                  </sui-form-field>
                </sui-list-item>
                <sui-form-field>
                  <h4 style="margin-bottom:15px;margin-top:15px;font-weight:300">所有者</h4>
                  <sui-input placeholder="Owner..." v-model="panel.reporter" icon="user" />
                </sui-form-field>
                <sui-form-field>
                  <h4 style="margin-bottom:15px;margin-top:15px;font-weight:300">生成时间</h4>
                  <Calendar></Calendar>
                </sui-form-field>
              </sui-list>
            </sui-grid-column>
          </sui-grid-row>
        </sui-grid>
        <sui-divider />
      </sui-form>
      <sui-button @click="commit">提交</sui-button>
    </sui-segment>
  </div>
</template>
<script>
import axios from "axios";
import {
  baseURL,
  get,
  save,
  associate,
  getAndAssociate,
  remove,
  update
} from "service/api";
import Calendar from "components/Calendar.vue";
import MarkdownEditor from "components/MarkdownEditor.vue";
import { mapGetters } from "vuex";
export default {
  components: { Calendar, MarkdownEditor },
  data() {
    return {
      location: "defects",
      panel: {
        title: null,
        reporter: "",
        type: {
          current: null,
          options: [
            {
              value: 1,
              text: "需求问题"
            },
            {
              value: 2,
              text: "界面问题"
            },
            {
              value: 3,
              text: "核心问题"
            },
            {
              value: 4,
              text: "问题解决成功"
            },
            {
              value: 5,
              text: "其他问题"
            }
          ]
        }
      }
    };
  },
  computed: {
    ...mapGetters({
      user: "user"
    })
  },
  mounted() {
    this.panel.reporter = this.$store.getters.user.name;
  },
  methods: {
    commit: async function() {
      console.log("调用");
      let self = this;
      console.log("提交的验证");
      if (this.panel.type.current != null) {
        await save("defects/operation/article", {
          article: {
            content: this.$refs.markdownEditor.mavonEditor.article.content
          },
          defect: {
            reportTitle: this.panel.title,
            reporter: this.panel.reporter,
            type: this.panel.type.current
          }
        })
          .then(response => {
            if (response.status == "200") {
              alert("提交成功");
            }
            console.log(response);
          })
          .catch(error => {
            console.log(error);
          });
      } else {
        alert("类型不能为空");
      }
    }
  }
};
</script>